<template>
    <div class="dialog-upload">
        <el-button 
        type="primary"
        :loading="firstLoading"
        icon="el-icon-upload"
        @click="openHandler" 
        size="small"
        >
            {{btnText}}
        </el-button>

        <el-button 
        v-if="files.length > 0"
        type="text"
        @click="openHandler" 
        size="small"
        class="a-btn"
        >
            {{files[0].filename}}
        </el-button>

        <transition name="el-fade-in-linear">
            <div class="modal-cover" v-show="dialogVisible">
                <div class="card">
                    <div class="title">
                        {{name}} 采集上传提示：

                        <i class="el-icon-close btn-close" @click="closeHandler"></i>
                    </div>

                    <div class="body">
                        <div class="left">
                            <p>1.图片正向、文字清晰</p>
                            <p>2.附件应小于10M</p>
                            <p>3.图片格式为jpg、jpeg</p>
                        </div>

                        <div class="right">
                            <div 
                            v-if="template"
                            class="template"
                            >
                                <a :href="template" target="_blank">
                                    <i class="el-icon-download"></i>
                                    示例文件下载
                                </a>
                            </div>

                            <my-upload 
                                ref="upload"
                                :file-guid="fileguid" 
                                single 
                                @success="onSuccess"
                                @update="onUpdate"
                                class="upload"
                            ></my-upload>
                        </div>
                    </div>

                    <div class="footer" v-if="example">
                        <img :src="example" alt="">
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: {
        fileguid: {
            type: String,
            default: ''
        },
        name: {
            type: String,
            default: '',
        },
        // 示例文件地址
        example: {
            type: String,
            default: '',
        },
        // 模板文件地址
        template: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            dialogVisible: false,

            firstLoading: true,
            btnText: '获取中',
            files:[],
        };
    },
    computed: {
        
    },
    watch: {

    },
    methods: {
        // 打开弹窗
        openHandler() {
            if (!this.fileguid) {
                return;
            }
            
            this.dialogVisible = true;
        },
        // 关闭弹窗
        closeHandler() {
            this.dialogVisible = false;
        },
        onSuccess(){
            this.closeHandler();
        },
        onUpdate(files) {
            console.log(files);
            this.files = files;
            this.firstLoading = false;

            if (files.length) {
                this.btnText = '重新上传';

                return ;
            }

            this.btnText = '上传';
        },
    },
    mounted(){
        
    },
};
</script>


<style lang="scss" scoped>
@import '@css/var.scss';

::v-deep .upload {
    & a {
        cursor: pointer;
        text-decoration: none;
        overflow: hidden;
        max-width: 150px;
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 13px;
        line-height: 1;
        margin: 0;
        padding: 0;
        -o-text-overflow: ellipsis;
    }
}

.a-btn{
    max-width: 150px; 
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
} 

.modal-cover{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0, 0, 0, .5);

    .card{
        position: absolute;
        left: 50%;
        top: 20%;
        transform: translateX(-50%);
        width: 590px;
        background: white;
        padding: 30px 40px;
        box-sizing: border-box;

        .title{
            font-size: 16px;
            color: #2c2c2c;
            text-align: center;
            position: relative;

            .btn-close{
                position: absolute;
                right: 0;
                cursor: pointer;

                &:hover{
                    color: $primaryColor;
                }
            }
        }

        .body{
            display: flex;
            align-items: center;
            margin-top: 46px;

            .left{
                flex: 1;
                font-size: 14px;
                color: #2c2c2c;
                line-height: 2em;
            }

            .right{
                .template{
                    margin-bottom: 14px;
                    color: $primaryColor;
                }
            }
        }

        .footer{
            margin-top: 30px;
            border: solid 1px #dcdcdc;

            img{
                display: block;
                width: 100%;
            }
        }
    }
}
</style>